<template>
    <div class="person">
        <h2>当前的求和为:{{ sum }}</h2>
        <button @click="add">加1</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { onBeforeMount, ref,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
//数据
let sum=ref(0)
//方法
function add(){
    sum.value+=1
}
//创建
console.log('Person组件创建')
//挂载前
onBeforeMount(() => {
    console.log('Person组件挂载前')
})
//挂载后
onMounted(() => {
    console.log('Person组件挂载后')
})

//更新前
onBeforeUpdate(() => {
    console.log('Person组件更新前')
})

//更新后
onUpdated(() => {
    console.log('Person组件更新后')
})
  // 卸载前
  onBeforeUnmount(()=>{
    // console.log('卸载前')
  })
  // 卸载完毕
  onUnmounted(()=>{
    // console.log('卸载完毕')
  })
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
  li {
    font-size: 20px;
  }
</style>
